<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>股票计算</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
  <style>
    table{
      width: 100%;
      border-spacing: 0;
    }
    td{
      border: solid 1px black;
    }
    .title{
      font-size: 20px;
      font-weight: bold;
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <p>{{ title }}</p>
    <table>
      <tr v-for="item in moneyType">
        <td>{{item.title}}</td>
        <td>{{item.describe}}</td>
        <td>{{item.price}}</td>
      </tr>
    </table>

    <hr>
    计算机：<input type="text" v-model="cal.num01"> 
      <select name="" id=""  v-model="type" style="appearance: none; width: 20px; height: 20px; text-align: center; line-height: 20px;">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
    <input type="text"  v-model="cal.num02"> = <input type="text"  v-model="num03">
    <hr>

    <div>
      <span class="title">收益计算计算：</span>
      <div style="display: flex;">
        <div style="flex: 1;">
          <div>
            <button @click="save02">保存</button>
          </div>
          <div>
            买入每股单价（<span style="color: red;">填写这个即可</span>）：<input type="text" @change="RevenueCalculationHandle" v-model="RevenueCalculation.buyPrice"> <br>
            买入股数（<span style="color: red;">填写这个即可</span>）：<input type="text" @change="RevenueCalculationHandle" v-model="RevenueCalculation.buyNum"> <br>
            卖出每股单价（<span style="color: red;">填写这个即可</span>）：<input type="text" @change="RevenueCalculationHandle" v-model="RevenueCalculation.sellPrice"> <br>
            卖出股数（<span style="color: red;">填写这个即可</span>）：<input type="text" @change="RevenueCalculationHandle" v-model="RevenueCalculation.sellNum"> <br>
            剩余股数：<input type="text" v-model="RevenueCalculation.restNUm"> <br>
            剩余金额：<input type="text" v-model="RevenueCalculation.allPrice"> <br>
            收益：<input type="text" v-model="RevenueCalculation.getPrice"> <br>
          </div>
        </div>
        <div style="flex: 1;">
          <ul>
            <li v-for="(item, index) in localData02" :keys="item.id">
              <span style="margin-right: 20px;">id:{{ index + 1 }}</span>
              <span style="margin-right: 20px;">股数:{{ item.num }}</span>
              <span style="margin-right: 20px;">买入价格:{{ item.price }}</span>
              <span style="margin-right: 20px;">卖出价格:{{ item.price02 }}</span>
              <span style="margin-right: 20px;">收益:{{ item.getPrice && item.getPrice.toFixed(3) }}</span>
              <button @click="deleteA02(item.id)">删除</button>
            </li>
          </ul>
        </div>
      </div>

    </div>


    <hr>
    <div>
      <span class="title">买入手续费计算：</span>
      <div>
        买入每股单价（<span style="color: red;">填写这个即可</span>）：<input type="text" v-model="PurchaseHandlingFee.PurchaseUnitPricePerShare"> <br>
        买入股数（<span style="color: red;">填写这个即可</span>）：<input type="text" v-model="PurchaseHandlingFee.num"> <br>
        购买总金额：<input type="text" v-model="TotalPurchaseAmount"> <br>
        交易佣金：<input type="text" v-model="PurchaseHandlingFee.TransactionCommission"> <br>
        过户费：<input type="text" v-model="PurchaseHandlingFee.TransferFee"> <br>
        购买总手续费：<input type="text" v-model="TotalTransactionFeeForPurchase"> <br>
        实际等价于买入每股单价：<input type="text" v-model="ActualPurchasePricePerShare"> <br>
      </div>
    </div>
    <hr>

    <div>
      <span class="title">卖出手续费计算：</span>
      <div>
        卖出每股单价（<span style="color: red;">填写这个即可</span>）：<input type="text" v-model="sellingHandlingFee.SellingUnitPricePerShare"> <br>
        卖出股数（<span style="color: red;">填写这个即可</span>）：<input type="text" v-model="sellingHandlingFee.num"> <br>
        卖出总金额（<span style="color: red;">填写这个即可</span>）：<input type="text" v-model="TotalSellingAmount"> <br>
        卖出交易佣金（<span style="color: red;">填写这个即可</span>）：<input type="text" v-model="sellingHandlingFee.TransactionCommission"> <br>
        卖出过户费：<input type="text" v-model="sellingHandlingFee.TransferFee"> <br>
        印花税：<input type="text" v-model="sellingHandlingFee.stampDuty"> <br>
        卖出总手续费：<input type="text" v-model="SellingTotalHandlingFee"> <br>
        实际等价于卖出每股单价：<input type="text" v-model="ActualSellingPricePerShare"> <br>
        最终收获：<input type="text" v-model="finallyMoney"> <br>
      </div>
    </div>

    <hr>
    <div style="display: flex;">
      <div style="flex: 1;">
        <span class="title">买入和卖出要盈利的最低价格：</span>
        <div>
          <button @click="save">保存</button>
        </div>
        <div>
          买入每股单价（<span style="color: red;">填写这个即可</span>）：<input type="text" @change="show" v-model="sellAndbuy.a"> <br>
          买入股数（<span style="color: red;">填写这个即可</span>）：<input type="text" @change="show" v-model="sellAndbuy.b"> <br>
          购买总金额：<input type="text" v-model="sellAndbuy.c"> <br>
          买入交易佣金：<input type="text" v-model="sellAndbuy.d"> <br>
          买入过户费：<input type="text" v-model="sellAndbuy.e"> <br>
          购买总手续费：<input type="text" v-model="sellAndbuy.f"> <br>
          实际等价于买入每股单价：<input type="text" v-model="sellAndbuy.g"> <br>
          
          <span style="color: red;">不亏本，需要最低卖出每股单价：</span><input type="text" v-model="sellAndbuy.h"> <br>
          卖出股数：<input type="text" v-model="sellAndbuy.i"> <br>
          卖出总金额：<input type="text" v-model="sellAndbuy.j"> <br>
          卖出交易佣金：<input type="text" v-model="sellAndbuy.k"> <br>
          卖出过户费：<input type="text" v-model="sellAndbuy.l"> <br>
          卖出印花税：<input type="text" v-model="sellAndbuy.m"> <br>
          卖出总手续费：<input type="text" v-model="sellAndbuy.n"> <br>
          <!-- 实际等价于卖出每股单价：<input type="text" v-model="sellAndbuy.o"> <br> -->
          最终收获：<input type="text" v-model="sellAndbuy.p"> <br>
        </div>
      </div>
      <div style="flex: 1;">
        <ul>
          <li v-for="(item,index) in localData" :keys="item.id">
            <span style="margin-right: 30px;">id：{{ index + 1 }}</span>
            <span style="margin-right: 30px;">单价：{{ item.price }}</span>
            <span style="margin-right: 30px;">股数：{{ item.num }}</span>
            <span style="margin-right: 30px;">需要卖出单价：{{ item.price02 && item.price02.toFixed(3) }}</span>
            <button @click="deleteA(item.id)">删除</button>
          </li>
        </ul>
      </div>

    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        localData: [],
        localData02: [],
        title: '股票计算',
        cal: {
          num01: null,
          num02: null,
        },
        type: '+',
        moneyType: [
          {id: 1, title: '佣金', describe: '万分之2.5，最少5元，买卖都有，一般在万分之二到千分之三之间,东方财富的是万分之2.5', price: 0.00025},
          {id: 2, title: '印花税', describe: '成交金额千分之一，只有卖出时候才有', price: 0.003},
          {id: 3, title: '过户费', describe: '万分之0.2，买卖都有', price: 0.00002},
        ],
        PurchaseHandlingFee: {
          PurchaseUnitPricePerShare: 	0,
          num: 0,
          TransactionCommission: 0.00025,
          TransferFee: 	0.00002,
        },
        sellingHandlingFee: {
          SellingUnitPricePerShare: 0,
          num: 0,
          TransactionCommission: 0.00025,
          TransferFee: 	0.00002,
          stampDuty: 0.003,
        },
        sellAndbuy: {
          a: null,
          b: null,
          c: null,
          d: 0.00025,
          e: 0.00002,
          f: null,
          g: null,
          h: null,
          i: null,
          j: null,
          k: 0.00025,
          l: 0.00002,
          m: 0.003,
          n: null,
          o: null,
          p: null,
        },
        RevenueCalculation:{
          buyPrice: null,
          buyNum: null,
          sellPrice: null,
          sellNum: null,
          restNUm: null,
          allPrice: null,
          getPrice: null,
        }
      },
      mounted(){
        const data = localStorage.getItem('sellAndBug')
        if(data) this.localData = JSON.parse(data)

        const data02 = localStorage.getItem('sellAndBug02')
        if(data02) this.localData02 = JSON.parse(data02)
      },
      computed: {
        // 购买总价
        TotalPurchaseAmount(){
          return this.PurchaseHandlingFee.PurchaseUnitPricePerShare * this.PurchaseHandlingFee.num
        },
        // 卖出总价
        TotalSellingAmount(){
          return this.sellingHandlingFee.SellingUnitPricePerShare * this.sellingHandlingFee.num
        },
        // 买入总手续费
        TotalTransactionFeeForPurchase(){
          const a = this.TotalPurchaseAmount - 0
          const b = this.PurchaseHandlingFee.TransactionCommission - 0
          const c = this.PurchaseHandlingFee.TransferFee - 0
          let e = 0
          if(a) e = a * b > 5 ? a * b : 5 
          return e + a * c
        },
        // 卖出总手续费
        SellingTotalHandlingFee(){
          const a = this.TotalSellingAmount - 0
          const b = this.sellingHandlingFee.TransactionCommission - 0
          const c = this.sellingHandlingFee.TransferFee - 0
          const d = this.sellingHandlingFee.stampDuty - 0
          let e = 0
          if(a) e = a * b > 5 ? a * b : 5 
          return e + a * c + a * d
        },
        // 实际等价于买入每股单价
        ActualPurchasePricePerShare(){
          const a = this.TotalPurchaseAmount - 0
          const b = this.PurchaseHandlingFee.PurchaseUnitPricePerShare - 0
          const c = this.TotalTransactionFeeForPurchase - 0
          if(!a || !b) return 0
          return (a + c)/(a/b) 
        },  
        // 实际等价于卖出每股单价
        ActualSellingPricePerShare(){
          const a = this.TotalSellingAmount - 0
          const b = this.sellingHandlingFee.SellingUnitPricePerShare - 0
          const c = this.SellingTotalHandlingFee - 0
          if(!a || !b) return 0
          return (a - c)/(a/b) 
        },
        finallyMoney(){
          return this.TotalSellingAmount - this.SellingTotalHandlingFee
        },
        // 计算机
        num03(){
          const a = this.cal.num01 - 0
          const b = this.cal.num02 - 0
          if(a && b){
            if(this.type === '+'){
              return a + b
            }else if(this.type === '-'){
              return a - b
            }else if(this.type === '*'){
              return a * b
            }else if(this.type === '/'){
              return a / b
            }
          }
        }
      },
      methods:{
        show(){
          console.log(123)
          if(this.sellAndbuy.a && this.sellAndbuy.b){
            console.log(456)
            const a = this.sellAndbuy.a
            const b = this.sellAndbuy.b
            this.sellAndbuy.c = a * b
            const c = this.sellAndbuy.c
            const x = c * this.sellAndbuy.d < 5 ? 5 : c * this.sellAndbuy.d
            this.sellAndbuy.f = x + c * this.sellAndbuy.e
            this.sellAndbuy.g = (c + this.sellAndbuy.f) / b 
            this.sellAndbuy.i = b
            this.sellAndbuy.p = 0
            

            if(a * b / 0.99673 > 20000){
              this.sellAndbuy.h = a / 0.99673
              this.sellAndbuy.n = this.sellAndbuy.h * b * 0.00327
            }else{
              this.sellAndbuy.h = (a * b + 5) / 0.99698 / b
              this.sellAndbuy.n = this.sellAndbuy.h * b * 0.00302 + 5 
            }
            this.sellAndbuy.j = this.sellAndbuy.h * b
          }
        },
        RevenueCalculationHandle(){
          const a = this.RevenueCalculation.buyPrice - 0
          const b = this.RevenueCalculation.buyNum - 0
          const c = this.RevenueCalculation.sellPrice - 0
          if(b) this.RevenueCalculation.sellNum = b
          const d = this.RevenueCalculation.sellNum - 0
          this.RevenueCalculation.restNUm = b - d

          if(a && b && c && d){
            const e = c * d * 0.00025 > 5 ? c * d * 0.00025 : 5
            console.log(e)
            console.log(0.00302 * c * d)
            this.RevenueCalculation.allPrice = c * d - e - 0.00302 * c * d
            console.log(this.RevenueCalculation.allPrice)
            console.log(a * b)
            this.RevenueCalculation.getPrice = this.RevenueCalculation.allPrice - a * b
          }
        },
        save(){
          if(!this.sellAndbuy.a || !this.sellAndbuy.b) return
          const obj = {
            price: this.sellAndbuy.a,
            num: this.sellAndbuy.b,
            price02: this.sellAndbuy.h,
            id: Math.random()
          }
          this.localData.push(obj)
          this.saveLocal('sellAndBug')
        },
        deleteA(id){
          this.localData = this.localData.filter(item => item.id !== id)
          this.saveLocal('sellAndBug')
        },
        saveLocal(name){
          if(name === 'sellAndBug'){
            localStorage.setItem(name, JSON.stringify(this.localData))
          }else if(name === 'sellAndBug02'){
            localStorage.setItem(name, JSON.stringify(this.localData02))
          }
        },
        save02(){
          if(!this.RevenueCalculation.buyPrice || !this.RevenueCalculation.buyNum || !this.RevenueCalculation.sellPrice) return
          const obj = {
            price: this.RevenueCalculation.buyPrice,
            num: this.RevenueCalculation.buyNum,
            price02: this.RevenueCalculation.sellPrice,
            getPrice: this.RevenueCalculation.getPrice,
            id: Math.random()
          }
          this.localData02.push(obj)
          this.saveLocal('sellAndBug02')
        },
        deleteA02(id){
          this.localData02 = this.localData02.filter(item => item.id !== id)
          this.saveLocal('sellAndBug02')
        },
      }
    })
  </script>
</body>
</html>
